<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/global.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>用户功能模块维护</legend>
		</fieldset>
		<div id="searchePage" class="layui-form-item" style="margin-top: 10px;margin-left: 10px;">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">用户名:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="userName" name="userName" autocomplete="off"
						class="layui-input" />
				</div>
				<label class="layui-form-mid">创建时间:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="beginDate" id="beginDate" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input" />
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input" />
				</div>
				<label class="layui-form-mid">是否锁定:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="isLock" name="isLock">
						<option value="">请选择</option>
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
				</div>
				<!-- <label class="layui-form-mid">排序:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="ord" name="orderBy">
						<option value="">请选择</option>
						<option value="CreateTime">创建时间</option>
						<option value="LastLoginTime">最后登录时间</option>
					</select>
				</div> -->
				<div class="layui-input-inline" style="width: 70px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-event="createUser" id="addPage">添加</button>
				</div>
			</form>
		</div>
	
	<!--
		编辑弹层
	-->
	<div id="updatePage" style="display: none;">
		<form class="layui-form" action="" onsubmit="return false" lay-filter="updateForm">
		<div class="layui-form-item" style="margin-top: 30px;">
			<label class="layui-form-label"><span style="color: red;">*</span>登录名:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="hidden" name="userId" />
				<input type="text" name="userName"
					lay-verify="uname" class="layui-input" disabled/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>邮箱:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" placeholder="请输入邮箱" name="userEmail"
					lay-verify="email" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>手机号:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" placeholder="请输入手机号" name="phoneNumber"
					lay-verify="ph" class="layui-input" />
			</div>
		</div>
		<div class="layui-btn-container" style="text-align: center;">
			<button class="layui-btn" id="transmit" lay-submit="" lay-filter="updateUser">保存</button>
		</div>
		</form>
	</div>
	
		<!--
			数据表格
		-->
		<table class="layui-hide" id="user_table" lay-filter="test">
			
		
		<!--
			角色穿梭框
		-->
		<div id="role_tarsfer"  style="display: none;">
			<div id="role_demo" class="demo-transfer" style="margin-top: 30px;margin-left: 50px;"></div>
		</div>
		
		<!--行内工具栏-->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="setRole">角色</a>
			
			{{# if(d.isLock == 1){ }}
				<a class="layui-btn layui-btn-warm layui-btn-xs layui-btn-disabled">密码重置</a>
			{{# }else{ }}
				<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="rePwd">密码重置</a>
			{{# } }}
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			<a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
		</script>
		<script type="text/html" id="lockout_switch">
			{{# if(d.isLock == 0){ }}
				<input type="checkbox" name="userName" value="{{d.userId}}" lay-filter="isLock" lay-skin="switch" lay-text="解锁|锁定">
			{{# }else{ }}
				<input type="checkbox" name="userName" value="{{d.userId}}" lay-filter="isLock" lay-skin="switch" lay-text="解锁|锁定" checked>
			{{# } }}
		</script>
	</body>
	<script type="text/javascript">
		layui.use(['table','form','layer','transfer','laydate'],function(){
			var table=layui.table,
			form=layui.form,
			$=layui.$,
			layer=layui.layer,
			transfer=layui.transfer,
			laydate=layui.laydate;
			
			
			//渲染数据表格
			table.render({
				elem:'#user_table',
				height:400,//http://192.168.1.250:83/api/GetUsers,GetUsersLayUI
				url:globalData.permissionServer+'/user/listUsers',
				method:"get",
				//headers: {token: globalData.getCurToken()},//设置请求头
				title:"用户表",
				page:true,
				cols:[
						[
						{
							field:'userName',
							title:'用户名',
							width:120,
							sort:true,
							align:'center'
						},{
							field:'headImg',
							title:'头像',
							width:120,
							templet:'<div><img src="headImg/{{d.headImg}}" style="width:200px;height:200px;"/></div>'
						},{
							field:'photo',
							title:'本人照片',
							width:120
						},{
							field:'isLock',
							title:'是否锁定',
							templet:$("#lockout_switch"),
							width:120,
							align:'center'
						},{
							field:'updateTime',
							title:'更新时间',
							width:120
						},{
							field:'createTime',
							title:'创建时间',
							width:120
						},{
							field:'lastLoginTime',
							title:'最后登录时间',
							width:120
						},{
							field:'locktime',
							title:'锁定时间',
							width:180,
							align:'center'
						},{
							field:'userEmail',
							title:'邮箱',
							width:100,
							align:'center'
						},{
							field:'phoneNumber',
							title:'手机号',
							width:100,
							align:'center'
						},{
							title:'操作',
							width:240,
							align:"center",
							toolbar:'#barDemo'
						}
						]
					],
					id:"testReload",
					done:function(res,curr,count){
					
					}
				});
				
				active={
					reload:function(){
						var userName=$("#userName");
						var beginDate=$("#beginDate");
						var endDate=$("#endDate");
						var isLock=$("#isLock");
						table.reload('testReload',{
							where:{
								'userName':userName.val(),
								'beginDate':beginDate.val(),
								'endDate':endDate.val(),
								'isLock':isLock.val()
							},
							curr:{
								page:1
							}
						});
					}
				};
				
				//查询操作
				$("#search").on('click',function(){
					var type=$(this).data('type');
					active[type]?active[type].call(this):'';
				})
				
				//添加用户弹出层
				$("#addPage").on('click',function(){
					layer.open({
						type:2,
						title:'添加用户',
						area: ['500px', '400px'],
						content:'user_add.html',
						end:function(){
							//alert(1)
						}
					});
				});
				
				//行内工具栏监听
				table.on('tool(test)',function(obj){
					var data=obj.data;
					switch(obj.event){
						case 'del':{
						layer.confirm('确认删除该用户吗['+data.userName+']的信息吗?',{icon:7},function(index){
							layer.close(index);
							
							$.ajax({
								type : "delete",
								url : globalData.permissionServer+'/user/deleteUser',
								data:{
									userId:data.userId
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								// beforeSend: function(request) {
								// 	request.setRequestHeader("token", globalData.getCurToken());
								// },
								success : function(res) {
									if(res.code == 0){
										layer.msg(res.msg,{icon:1,time:2000},function(index){
											table.reload('testReload');
										});
										
									}else{
										layer.msg(res.msg,{icon:2,time:2000});
									}
							}
							});
							
						});
						}
						break;
						case 'update':
						//表单赋值
						form.val('updateForm',data);
						var update_index=layer.open({
							type:1,
							title:'您正在修改用户['+data.userName+']的信息',
							area: ['500px', '300px'],
							content: $('#updatePage'),
							success:function(layero,index){
								//修改提交
								form.on('submit(updateUser)',function(obj){
									//console.log(obj.field);
									$.ajax({
										type : "put",
										url : globalData.permissionServer+'/user/updateUser',
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(update_index);
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
								});
							}
						});
						
						break;
						case 'rePwd':
						layer.confirm('确认重置密码?',{icon:7},function(index){
							layer.close(index);
							
							$.ajax({
								type : "put",
								url : globalData.permissionServer+"/user/rePassword",
								data:{
									userId:data.userId
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								// beforeSend: function(request) {
								// 	request.setRequestHeader("token", globalData.getCurToken());
								// },
								success : function(res) {
									if(res.code == 0){
										layer.msg(res.msg,{icon:1,time:2000},function(index){
											//table.reload('testReload');
										});
										
									}else{
										layer.msg(res.msg,{icon:2,time:2000});
									}
								}
							});
							return false;
						})
						break;
						case 'setRole':
							//获取全部角色
							$.ajax({
								type : "get",
								url : globalData.permissionServer+"/role/listRoles",
								data:{},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								// beforeSend: function(request) {
								// 	request.setRequestHeader("token", globalData.getCurToken());
								// },
								success : function(r) {
									var allData = r.data;
									var	rData=new Array();
									//右侧角色
									$.ajax({
										type : "get",
										url : globalData.permissionServer+"/userRole/getUserRoleByUserId",
										data:{
											userId:data.userId
										},//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											var ownerRole = res.data;
											//获取用户拥有的角色id加入到集合
												if(ownerRole.length>0){
													for(var i=0;i<ownerRole.length;i++){
														rData.push(ownerRole[i].roleId);
													}
												}
												//渲染穿梭框
											transfer.render({
												elem:'#role_demo',
												title:['系统所有角色','当前用户角色'],
												data:allData,
												parseData:function(allData){
													return{
														'value':allData.roleId,
														'title':allData.roleName
													}
												},
												value:rData,
												id:'test1_id',
												onchange:function(obj,index){
													if(index=='0'){
														var roleIds=[];
														//添加角色
														//循环获取要添加的角色id
														for(var i=0;i<obj.length;i++){
															//追加到集合中
															roleIds.push(obj[i].value);
														}
														$.ajax({
															type : "post",
															url : globalData.permissionServer+"/userRole/batchInsertUserRole",
															
															data:{
																userId:data.userId,
																roleIds:roleIds
															},//需要传递到服务端的数据
															dataType:'json',//服务端响应数据类型
															xhrFields: {
																withCredentials: true
															},
															// beforeSend: function(request) {
															// 	request.setRequestHeader("token", globalData.getCurToken());
															// },
															success : function(res) {
																if(res.code == 0){
																	layer.msg(res.msg,{icon:1,time:2000},function(index){
																		//table.reload('testReload');
																	});
																	
																}else{
																	layer.msg(res.msg,{icon:2,time:2000});
																}
															}
														});	
														
													}else{
														var roleIds=[];
														//删除角色
														
														//循环获取要删除的角色id
														for(var i=0;i<obj.length;i++){
															//追加到集合中
															roleIds.push(obj[i].value);
														}
														$.ajax({
															type : "delete",
															url : globalData.permissionServer+"/userRole/batchDeleteUserRole",
															data:{
																userId:data.userId,
																roleIds:roleIds
															},//需要传递到服务端的数据
															dataType:'json',//服务端响应数据类型
															xhrFields: {
																withCredentials: true
															},
															// beforeSend: function(request) {
															// 	request.setRequestHeader("token", globalData.getCurToken());
															// },
															success : function(res) {
																if(res.code == 0){
																	layer.msg(res.msg,{icon:1,time:2000},function(index){
																		//table.reload('testReload');
																	});
																	
																}else{
																	layer.msg(res.msg,{icon:2,time:2000});
																}
															}
														});	
														
													}
												}
											});
										}
									});
								}
							});
							
							layer.open({
								type:1,
								title:'您正在设置用户['+data.userName+']的角色',
								area: ['600px', '600px'],
								content:$("#role_tarsfer")
								//success:function()
							});
						break;
					}
				});
				
				
				//锁定开关监听事件
				form.on('switch(isLock)',function(data){
					var elem = data.elem;
					var userId = data.value;
					var isLock;
					if(elem.checked){
						//锁定
						isLock = 1;
					}else{
						//解锁
						isLock = 0;
					}
					$.ajax({
						type : "put",
						url : globalData.permissionServer+"/user/lockOrUnlock",
						data:{
							userId:userId,
							isLock:isLock
						},//需要传递到服务端的数据
						dataType:'json',//服务端响应数据类型
						xhrFields: {
							withCredentials: true
						},
						// beforeSend: function(request) {
						// 	request.setRequestHeader("token", globalData.getCurToken());
						// },
						success : function(res) {
							if(res.code == 0){
								layer.msg(res.msg,{icon:1,time:2000},function(index){
									//table.reload('testReload');
								});
								
							}else{
								layer.msg(res.msg,{icon:2,time:2000});
							}
						}
					});
				});
				
				//日期时间选择器
				laydate.render({ 
				  elem: '#beginDate'
				  ,type: 'date'
				});
				laydate.render({
				  elem: '#endDate'
				  ,type: 'date'
				});
			});
	</script>
</html>
